@use "../../frameless";

.masonry {
    column-gap: frameless.$gutter;
    column-width: frameless.$cols4;
    padding-bottom: 1rem;
    -webkit-perspective: 1;
}

// column-count required for Firefox, IE and Edge
//4 columns
@media #{frameless.$small} {
    .masonry {
        column-count: 1;
    }
}

//6 columns
@media #{frameless.$medium} {
    .masonry {
        column-count: 1;
    }
}


//8 columns
@media #{frameless.$intermediate} {
    .masonry {
        column-count: 2;
    }
}

// 12 columns
@media #{frameless.$big} {
    .masonry {
        column-count: 3;
    }
}
